<template>
  <view class="schedule">
    <view class="date-picker">
      <view class="date-controls">
        <view class="arrow" @click="prevDay">
          <uni-icons type="arrow-left" size="24" color="#64b5f6"></uni-icons>
        </view>
        <text class="current-date" @click="toggleCalendar">
          {{ formattedDate }}
        </text>
        <view class="arrow" @click="nextDay">
          <uni-icons type="arrow-right" size="24" color="#64b5f6"></uni-icons>
        </view>
      </view>
      <view v-if="showCalendar" class="calendar-grid">
        <view class="weekdays">
          <text 
            v-for="(day, index) in weekdays" 
            :key="index" 
            :class="['weekday', { 'current': index === currentWeekday }]"
          >
            {{ day }}
          </text>
        </view>
        <view class="days">
          <view 
            v-for="(day, index) in days" 
            :key="index"
            :class="['day', {
              'current': day.isCurrent,
              'selected': day.isSelected,
              'other-month': !day.isCurrentMonth
            }]"
            @click="selectDate(day)"
          >
            <text>{{ day.date }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="header-section">
      <text class="subtitle">今日安排</text>
      <view class="decor-line"></view>
    </view>
    
    <view class="task-section" v-for="(group, index) in groupedTasks" :key="index">
      <text class="group-title">{{ group.time }}</text>
      <view class="task-list">
        <TaskItem v-for="(task, taskIndex) in group.tasks" :key="taskIndex" :title="task.title" :time="task.time" :priority="task.priority" />
      </view>
    </view>

    <BottomNav activeTab="schedule" />
  </view>
</template>

<script>
import TaskItem from '@/components/TaskItem.vue'
import BottomNav from '@/components/BottomNav.vue'

export default {
  components: { BottomNav, TaskItem },
  data() {
    const today = new Date()
    const currentMonth = new Date(today.getFullYear(), today.getMonth(), 1)
    
    return {
      currentDate: today,
      selectedDate: today,
      weekdays: ['日', '一', '二', '三', '四', '五', '六'],
      days: [],
      showCalendar: false,
      currentWeekday: today.getDay(),
      currentMonth: currentMonth,
      groupedTasks: [
        {
          time: "上午",
          tasks: [
            { title: "团队会议", time: "09:00 - 10:30", priority: "高" },
            { title: "文档整理", time: "10:30 - 11:00", priority: "中" }
          ]
        },
        {
          time: "下午",
          tasks: [
            { title: "学习", time: "14:00 - 17:00", priority: "中" },
            { title: "晚间锻炼", time: "18:00 - 19:00", priority: "低" }
          ]
        }
      ]
    }
  },
  computed: {
    formattedDate() {
      const year = this.currentDate.getFullYear()
      const month = String(this.currentDate.getMonth() + 1).padStart(2, '0')
      const day = String(this.currentDate.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    }
  },
  methods: {
    generateCalendar() {
      const year = this.currentMonth.getFullYear()
      const month = this.currentMonth.getMonth()
      
      const firstDay = new Date(year, month, 1)
      const lastDay = new Date(year, month + 1, 0)
      
      const days = []
      
      // Add previous month's days
      const prevMonthDays = firstDay.getDay()
      for (let i = prevMonthDays - 1; i >= 0; i--) {
        const date = new Date(year, month, -i)
        days.push({
          date: date.getDate(),
          isCurrentMonth: false,
          isCurrent: false,
          isSelected: false,
          fullDate: date
        })
      }
      
      // Add current month's days
      for (let i = 1; i <= lastDay.getDate(); i++) {
        const date = new Date(year, month, i)
        const isCurrent = date.toDateString() === new Date().toDateString()
        days.push({
          date: i,
          isCurrentMonth: true,
          isCurrent: isCurrent,
          isSelected: date.toDateString() === this.selectedDate.toDateString(),
          fullDate: date
        })
      }
      
      // Add next month's days
      const nextMonthDays = 42 - days.length
      for (let i = 1; i <= nextMonthDays; i++) {
        const date = new Date(year, month + 1, i)
        days.push({
          date: i,
          isCurrentMonth: false,
          isCurrent: false,
          isSelected: false,
          fullDate: date
        })
      }
      
      this.days = days
    },
    prevMonth() {
      this.currentMonth = new Date(
        this.currentMonth.getFullYear(),
        this.currentMonth.getMonth() - 1,
        1
      )
      this.generateCalendar()
    },
    nextMonth() {
      this.currentMonth = new Date(
        this.currentMonth.getFullYear(),
        this.currentMonth.getMonth() + 1,
        1
      )
      this.generateCalendar()
    },
    selectDate(day) {
      if (!day.isCurrentMonth) return
      
      this.selectedDate = day.fullDate
      this.currentDate = day.fullDate
      this.generateCalendar()
    },
    
    prevDay() {
      const newDate = new Date(this.currentDate)
      newDate.setDate(newDate.getDate() - 1)
      this.currentDate = newDate
      this.generateCalendar()
    },
    
    nextDay() {
      const newDate = new Date(this.currentDate)
      newDate.setDate(newDate.getDate() + 1)
      this.currentDate = newDate
      this.generateCalendar()
    },
    
    toggleCalendar() {
      this.showCalendar = !this.showCalendar
    }
  },
  mounted() {
    this.generateCalendar()
  }
}
</script>

<style scoped lang="scss">
.schedule {
  min-height: 100vh;
  padding: 24px;
  background: linear-gradient(180deg, rgba(100,181,246,0.05) 0%, rgba(255,255,255,1) 100%);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: linear-gradient(180deg, rgba(100,181,246,0.1) 0%, rgba(100,181,246,0) 100%);
    z-index: 0;
  }
}

.date-picker {
  margin-bottom: 32px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(100,181,246,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(100,181,246,0.08);
  position: relative;
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(100,181,246,0.15);
    border-color: rgba(121, 182, 232, 0.12);
  }
}

.date-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding: 8px;
  border-radius: 20px;
  background: rgba(100,181,246,0.04);
  transition: all 0.3s ease;
  
  &:hover {
    background: rgba(100,181,246,0.08);
  }
}

.current-date {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  padding: 8px 16px;
  border-radius: 16px;
  transition: all 0.3s ease;
  
  &:hover {
    background: rgba(100,181,246,0.08);
    color: #64b5f6;
  }
}

.arrow {
  padding: 12px;
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  
  &:hover {
    background: rgba(100,181,246,0.1);
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(100,181,246,0.08);
  }
  
  &:active {
    transform: scale(0.98);
  }
}

.calendar-grid {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 16px;
  padding: 16px;
  background: rgba(255,255,255,0.95);
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(100,181,246,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(100,181,246,0.06);
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 8px 32px rgba(100,181,246,0.12);
    border-color: rgba(100,181,246,0.1);
  }
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #8e8e93;
  padding: 8px;
  background: rgba(100,181,246,0.04);
  border-radius: 16px;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  padding: 8px;
  background: rgba(255,255,255,0.98);
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(100,181,246,0.06);
}

.day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  &.current {
    background: rgba(100,181,246,0.1);
    font-weight: 600;
    color: #64b5f6;
    box-shadow: 0 4px 16px rgba(100,181,246,0.08);
  }
  
  &.selected {
    background: linear-gradient(145deg, #64b5f6 0%, #90caf9 100%);
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(100,181,246,0.15);
  }
  
  &.other-month {
    color: #8e8e93;
    opacity: 0.6;
  }
  
  &:hover:not(.selected) {
    background: rgba(100,181,246,0.08);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(100,181,246,0.08);
  }
  
  &:active {
    transform: scale(0.98);
  }
}

.header-section {
  margin: 0 0 32px;
  position: relative;
}

.subtitle {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
  margin-bottom: 8px;
}

.date {
  display: block;
  font-size: 16px;
  color: #8e8e93;
  margin-bottom: 16px;
}

.decor-line {
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 120px;
  height: 4px;
  background: linear-gradient(90deg, #64b5f6 0%, #90caf9 100%);
  border-radius: 2px;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.header-section:hover .decor-line {
  width: 160px;
  opacity: 1;
}

.group-title {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 24px 0 32px;
  letter-spacing: -0.3px;
  position: relative;
  padding-left: 24px;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 24px;
    background: linear-gradient(180deg, #64b5f6 0%, #90caf9 100%);
    border-radius: 3px;
    transform: translateY(-50%);
    transition: all 0.3s ease;
  }
  
  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 40px;
    height: 2px;
    background: rgba(100,181,246,0.2);
    border-radius: 2px;
    transition: all 0.3s ease;
  }
  
  &:hover {
    &::before {
      height: 32px;
      background: linear-gradient(180deg, #90caf9 0%, #64b5f6 100%);
    }
    
    &::after {
      width: 60px;
      background: rgba(100,181,246,0.4);
    }
  }
}

.task-list {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 6px 32px rgba(100,181,246,0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(100,181,246,0.12);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, rgba(100,181,246,0.02) 0%, rgba(144,202,249,0.01) 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, rgba(100,181,246,0.3) 0%, rgba(144,202,249,0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(100,181,246,0.15);
    border-color: rgba(100,181,246,0.2);
    background: rgba(255, 255, 255, 0.95);
    
    &::before {
      opacity: 1;
    }
    
    &::after {
      opacity: 1;
    }
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>
